import React from 'react';
import './horizontal_1.css';


class Horizontal_1 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            datainfo:props.datainfo.datainfo||[],
            eid:props.eid,
            maxTimeLineHeight:'0',
            maxTimeLineWidth:'0',
            maxContentHeight:'0'
        }
        this.textSize=this.textSize.bind(this);
        this.getChineseLength=this.getChineseLength.bind(this);
        this.getLength=this.getLength.bind(this);
        this.rdCss=this.rdCss.bind(this);
        this.updateData=this.updateData.bind(this);
    }
    componentDidMount(){
        const {datainfo}=this.props;
        const {eid}=this.state
        this.updateData();

    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }

    updateData(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        let maxTimeLineHeight=0;
        let maxContentHeight=0;
        let maxTimeLineWidth=0;

        if(datainfo!=null&&datainfo.length>0){
            datainfo.map((item,i)=>{
                let timelineDivClass=".timeline-horizontal-1 .data_"+eid+"_"+i+" .dateSpan";
                let timelineDiv=document.querySelector(timelineDivClass);
                let timelineHeight=parseInt(Number(this.rdCss(timelineDiv, 'height')));
                let timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')));

                let contentDivClass=".timeline-horizontal-1 .contentDiv_"+eid+"_"+i;
                let contentDiv=document.querySelector(contentDivClass);
                let contentHeight=parseInt(Number(this.rdCss(contentDiv, 'height')));


                if(parseInt(timelineHeight)>parseInt(maxTimeLineHeight)){
                    maxTimeLineHeight=timelineHeight;
                }
                if(parseInt(contentHeight)>parseInt(maxContentHeight)){
                    maxContentHeight=contentHeight;
                }
                if(parseInt(timelineWidth)>parseInt(maxTimeLineWidth)){
                    maxTimeLineWidth=timelineWidth;
                }

            })
            this.setState({maxTimeLineHeight:maxTimeLineHeight,maxContentHeight:maxContentHeight,maxTimeLineWidth:maxTimeLineWidth});
        }
    }

    getChineseLength(str){
        let chinese= str.match(/[\u4e00-\u9fa5]/g);
        if(chinese==null){
            return 0;
        }
        return chinese.length;
    }

    getLength(str){
        if(/[a-z]/i.test(str)){
            return str.match(/[a-z]/ig).length;
        }
        return 0;
    }

    textSize(fontSize, text) {
        let span = document.createElement("span");
        let result = {};
        result.width = span.offsetWidth;
        result.height = span.offsetHeight;
        span.style.visibility = "hidden";
        span.style.fontSize = fontSize;
        span.style.lineHeight = '20px';//最好设置行高 方便项目中计算
        span.style.fontFamily = '-apple-system, "PingFang SC", "Helvetica Neue", Helvetica,\n' +
            'STHeiTi, sans-serif';//字体 可以替换为项目中自己的字体
        span.style.display = "inline-block";
        document.body.appendChild(span);
        if (typeof span.textContent !== "undefined") {
            span.textContent = text;
        } else {
            span.innerText = text;
        }
        result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
        result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
        span.parentNode.removeChild(span);//删除节点
        return result;
    }


    render(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        let {maxTimeLineHeight,maxContentHeight,maxTimeLineWidth}=this.state;


        let bStyle={width:'20px',height:'20px',position:'absolute',top:'0',right:'0',left:'-6px'};
        let rightStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'18px solid #adadad'};
        let leftStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'10px solid white'};

        let maxlength=0;
        let maxText="";
        let maxTimeLineText="";
        let maxTimeLineLength=0;
        let maxChineseLength=0;
        if(datainfo!=null&&datainfo.length>0){
            datainfo.map((item,i)=>{
                let contentLength=item.content.length;
                contentLength>maxlength?maxText=item.content:'';
                contentLength>maxlength?maxlength=contentLength:'';
                let chineseLength=this.getChineseLength(item.timeline);
                let timeLineLength=item.timeline.length+parseInt(chineseLength);
                if(timeLineLength>maxTimeLineLength || (timeLineLength==maxTimeLineLength && chineseLength>maxChineseLength)){
                    maxTimeLineText=item.timeline;
                    maxTimeLineLength=timeLineLength;
                    maxChineseLength=parseInt(this.getChineseLength(item.timeline));
                }

            })
        }
        //获取最大内容宽度
        let contentChineseCount=this.getChineseLength(maxText);
        let contentLetter=this.getLength(maxText);
        let maxContentWidth=parseInt(contentChineseCount)*12+parseInt(contentLetter)*5+(parseInt(maxText.length)-parseInt(contentChineseCount)-parseInt(contentLetter))*8+12;



        //获取最大时间轴宽度
        let timelineChineseCount=this.getChineseLength(maxTimeLineText);
        let timelineLetter=this.getLength(maxTimeLineText);
        let maxTimelineWidth=parseInt(timelineChineseCount)*14+parseInt(timelineLetter)*6+(parseInt(maxTimeLineText.length)-parseInt(timelineChineseCount)-parseInt(timelineLetter))*9+12;


        let maxWidth=maxTimelineWidth;

        //控制宽度范围
        if(parseInt(maxWidth)<114){
            maxWidth=114;
        }else if(parseInt(maxWidth)>190){
            maxWidth=190;
        }
        let contentWidth=maxWidth+12;
        if(parseInt(contentWidth)>190){
            contentWidth=190;
        }


        let maxHeight=parseInt(maxContentHeight)+30+parseInt(maxTimeLineHeight)+50;
        let topHeight=parseInt(maxTimeLineHeight)+40;

      /*  if(maxWidth==190){topHeight=topHeight+50}*/

        if(maxHeight<150){
            maxHeight=150;
        }
        let eventsWidth=0;
        if(datainfo!=null&&datainfo.length>0){

            eventsWidth=(datainfo.length)*(parseInt(maxWidth)+30)+50;
        }

        let style={width:'20px',height:'20px',left:eventsWidth,top:'-10px'};

        return<div className="timeline-horizontal-1">
                    {  datainfo!=null&&datainfo.length>0?
                        <div className="timeline" style={{height:maxHeight}}>
                            <div className={"timeline-data timeline-data-"+eid} >
                                <div className="horizontal-1"  style={{width:eventsWidth,top:topHeight}}>
                                    <ol style={{listStyle:'none'}}>
                                        {
                                            datainfo.map((item,i)=>{
                                                const leftWidth=(parseInt(maxWidth)+30)*(i)+50;
                                                let contentdata=item.content;
                                                let contentArr=contentdata.split(/\n/g);
                                                return <li>
                                                            <a href="#0" style={{left:leftWidth}}  className={"num_"+i%4+" data_"+eid+"_"+i}  data-date={item.timeline} >
                                                                <span id={"dateSpan_"+i} className="dateSpan" style={{width:maxWidth}} title={item.timeline}>{item.timeline}</span>
                                                                <span className="span"></span>
                                                            </a>
                                                            <div id={'contentDiv'} className={" contentDiv_"+eid+"_"+i} style={{left:leftWidth,wordBreak:'break-all',width:contentWidth,textAlign:'center'}}>
                                                                {
                                                                    contentArr.map((item,i)=>{
                                                                        if(item==""){
                                                                            return <span style={{display:'block',height:'20px'}}></span>
                                                                        }
                                                                        return <span style={{display:'block'}}>{item}</span>
                                                                    })
                                                                }
                                                            </div>
                                                         </li>
                                            })
                                        }
                                    </ol>
                                    <div style={style}>
                                        <b className="right" style={bStyle}><i className="right-arrow1" style={rightStyle}></i><i className="right-arrow2" style={leftStyle}></i></b>
                                    </div>
                                </div>
                            </div>
                        </div>
                    :
                        <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                     }
                </div>

    }

}

export default Horizontal_1;